<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="关于我们" />
    </template>
    <view class="content">
      <view class="basic t-center">
        <image
          src="../../../assets/images/logo.png"
          mode="aspectFit"
          class="logo"
        ></image>
        <view class="title bold">剧多分APP</view>
        <view class="ver fs-32 c-90">v1.0.0</view>
        <view class="desc fs-32 c-60">
          欢迎使用剧多分app——您的创意推广伙伴。通过我们的短剧一键推广功能，轻松将您的作品展示给更多用户，海量任务，丰厚奖励，快来开启你的创作之旅。
        </view>
        <view class="desc no-margin fs-32 c-60">
          现在就下载剧多分app，释放创造激情，赢取心动奖励。期待您的探索与体验。让我们一起，让每个想法都闪耀光芒！
        </view>
      </view>
      <view class="protocol">
        <view
          class="p-item flex"
          @click="onShowModal(item)"
          v-for="(item, index) in protocol"
          :key="index"
        >
          <view class="dot flex flex-a">
            <view class="inner"></view>
          </view>
          <view class="fs-32">《{{ item.name }}》</view>
        </view>
      </view>
    </view>
    <!-- <web-view height="500px" src="https://www.baidu.com" /> -->
    <Protocol :show="showModal" :type="type" @close="showModal = false" @confirm="showModal = false" />
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import Protocol from "../../../compennts/agreement/modal.vue";
export default {
  components: {
    layout,
    pageHead,
    Protocol,
  },
  data() {
    return {
      showModal:false,
      type:1,
      protocol: [
        {
          name: "用户协议",
          type: 1,
        },
        {
          name: "隐私协议",
          type: 2,
        },
        {
          name: "收集个人信息明示清单",
          type: 3,
        },
        {
          name: "个人信息第三方共享清单",
          type: 4,
        },
      ],
    };
  },
  methods: {
    onShowModal(item){
      this.showModal = true;
      this.type = item.type;
    }
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  min-height: 100%;
  background: #f7f8ff;
  padding: 32rpx;
  .basic {
    padding-top: 96rpx;
    .logo {
      width: 128rpx;
      height: 128rpx;
    }
    .title {
      font-size: 48rpx;
      margin-top: 32tpx;
    }
    .ver {
      margin-top: 16rpx;
    }
    .desc {
      margin-top: 48rpx;
      padding: 0 64rpx;
    }
    .no-margin {
      margin-top: 0;
    }
  }
  .protocol {
    padding: 32rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-top: 64rpx;
    color: #4870ff;
    .p-item {
      margin-top: 24rpx;
      &:nth-child(1) {
        margin-top: 0;
      }
    }
    .dot {
      width: 28rpx;
      height: 48rpx;
      line-height: 48rpx;
      flex-shrink: 0;
      .inner {
        height: 12rpx;
        width: 12rpx;
        background: #4870ff;
        border-radius: 50%;
      }
    }
  }
}
</style>
